﻿@page "/"
@inject IJSRuntime JS

<!--suppress ALL -->
<PageTitle>主页 - 西建大iOS Club</PageTitle>

<video id="videoPlayer" style="display: none" @onended="OnVideoEnded">
    <source src="other/纳新录音.m4a" type="video/mp4" />
</video>

<div @onwheel="FirstWheel">
    <GridRow Class="block" Align="center" Type="flex">
        <GridCol Style="width:75%;text-align: center" Xs="24" Sm="24" Md="24" Lg="9" Xl="9" Xxl="9">
            <div style="text-align: center">
                <Image Src="iOS_Club_LOGO.png" Preview="false" Style="width:75%;text-align: center"/>
                <div class="desktop-laptop">
                    <Progress Percent="@Percent" ShowInfo="false" Style="width:75%;margin: 10px"></Progress>
                    <Space style="text-align: center">
                        <SpaceItem>
                            <Button Type="@ButtonType.Text" OnClick="@(NextLyric)">
                                <Icon Type="step-backward" Class="card-d" Theme="outline"/>
                            </Button>
                        </SpaceItem>
                        <SpaceItem>
                            <Button Type="@ButtonType.Text" OnClick="() => Play()">
                                <Icon Type="@(IsPlaying ? "play-circle" :"pause" )" Class="card-d" Theme="outline"/>
                            </Button>
                        </SpaceItem>
                        <SpaceItem>
                            <Button Type="@ButtonType.Text" OnClick="@(NextLyric)">
                                <Icon Type="step-forward" Class="card-d" Theme="outline"/>
                            </Button>
                        </SpaceItem>
                    </Space>
                </div>
            </div>
        </GridCol>
        <GridCol Xs="24" Sm="24" Md="24" Lg="15" Xl="15" Xxl="15">
            <div class="gradient-text">XAUAT iOS Club</div>
            <div class="phone-desktop">
                <Title Level="3" Style="text-align: center">一个跨专业与课堂的数码开发爱好者社团</Title>
                <Paragraph Type="secondary" Style="text-align: center;font-size: 22px">
                    "Stay hungry, stay foolish"
                </Paragraph>
            </div>
            <Title Level="1" Class="home-title desktop-phone">西安建筑科技大学iOS众创空间俱乐部</Title>
            <div class="desktop-laptop">
                @for (var i = 0; i < Lyrics[LyricIndex].Length; i++)
                {
                    <h6 class="@(Math.Abs(i * 10 + 30 - Percent + 10) < 5 ? "Lyr-Display" : "") first-button">
                        @Lyrics[LyricIndex][i]
                    </h6>
                }
            </div>

        </GridCol>
    </GridRow>

    <div class="block-opacity desktop-phone">
        <Title Level="2" Style="text-align: center">
            关于我们
        </Title>
        <GridRow Class="block">
            @foreach (var item in Cards)
            {
                <GridCol Xs="24" Sm="24" Md="12" Lg="12" Xl="8" Xxl="8">
                    @if (string.IsNullOrEmpty(item.Url))
                    {
                        <Card Hoverable Class="card">
                            <div class="card-d">@item.ImageUrl</div>
                            <h3>@item.Title</h3>
                            <Paragraph Type="secondary">@item.Content</Paragraph>
                        </Card>
                    }
                    else
                    {
                        <a href="@item.Url" target="_blank">
                            <Card Hoverable Class="card">
                                <div class="card-d">@item.ImageUrl</div>
                                <h3>@item.Title</h3>
                                <Paragraph Type="secondary">@item.Content</Paragraph>
                            </Card>
                        </a>
                    }
                </GridCol>
            }
        </GridRow>
    </div>
</div>

<GridRow OnBreakpoint="OnBreakpoint" Class="block phone-desktop">
    @foreach (var item in Cards)
    {
        <GridCol Xs="24" Sm="24" Md="12" Lg="12" Xl="8" Xxl="8">
            <a href="@item.Url" target="_blank">
                <Card Hoverable Class="card">
                    <div class="card-d">@item.ImageUrl</div>
                    <h3>@item.Title</h3>
                    <Paragraph Type="secondary">@item.Content</Paragraph>
                </Card>
            </a>
        </GridCol>
    }
</GridRow>

@code {
    private double Percent { get; set; } = 30;

    private void OnBreakpoint(BreakpointType breakpoint)
    {
        IsMobile = (int)breakpoint <= 1200;
    }

    private bool IsMobile;

    private record CardModel(string ImageUrl, string Title, string Content, string Url = "");

    private int LyricIndex { get; set; }

    private void NextLyric()
    {
        LyricIndex--;
        if (LyricIndex < 0)
        {
            LyricIndex = Lyrics.Count - 1;
        }
    }

    private static List<string[]> Lyrics =>
    [
        [
            "这里是",
            "梦想家们改变世界的起点",
            "一个跨专业与课堂的数码开发爱好者社团",
            "跨越学科，体验编程与开发的魅力",
            "创造人生，开发非同凡响的APP"
        ],
        [
            "探讨学科前沿",
            "帮助扶持创业团队",
            "助力高校创新创业项目，搭建学生创新创业平台",
            "培养俱乐部成员的创新创业意识及软件开发能力",
            "丰富教学内容，深化校企合作发展"
        ]
    ];

    private bool IsPlaying { get; set; }
    
    private static CardModel[] Cards =>
    [
        new("\ud83c\udf4e", "我们是谁?", "我们是由Apple公司资金支持，受学管和西安建筑科技大学大学生创新创业实践中心指导的创新创业类社团。", "/About"),
        new("\ud83e\udd1d", "和iOS Club一起结伴同行", "不管是零基础的小白还是大神，只要你有兴趣，这里就是你的天堂", "/Articles"),
        new("\ud83c\udf10", "iOS Club,不止iOS", "我们不止只有iOS，西建大iOS Club是一个跨专业与课堂的数码编程爱好者社团", "OtherOrg"),
        new("\ud83d\ude00", "Apple \u2716\ufe0f 西建大", "苹果公司每个学期都会在学校举办各种活动，俱乐部成员可以参与合作软件开发，共同创造世界", "/Event"),
        new("\ud83d\udc69\ud83c\udffb\u200d\ud83d\udcbb", "合作软件开发", "加入我们，和志同道合的iMember一起合作开发，一起创造世界","https://gitee.com/XAUATiOSClub"),
        new("\ud83d\udcc8", "全校数码编程爱好者,联合起来！", "我们意图打造全校最大的科技社区，快来加入我们成为一名iMember吧", "/Login")
    ];

    private void FirstWheel(WheelEventArgs obj)
    {
        if (IsMobile || (Math.Abs(Percent - 100.0) < 0.01 && obj.DeltaY > 0) || (Math.Abs(Percent - 30.0) < 0.01 && obj.DeltaY < 0)) return;
        Percent += obj.DeltaY * 0.1;
        if (Percent - 30 < 0.01) Percent = 30;
        if (Percent - 100 > 0.01) Percent = 100;
    }

    private async Task Play()
    {
        IsPlaying = !IsPlaying;
        if (IsPlaying)
        {
            await JS.InvokeVoidAsync("playVideo");
        }
        else
        {
            await JS.InvokeVoidAsync("pauseVideo");
        }
    }
    
    private async Task OnVideoEnded()
    {
        await JS.InvokeVoidAsync("playVideo"); // 视频结束后自动重播
    }

}

<style>
    .block {
        padding: 40px;
        min-height: calc(100vh - 64px);
    }

    .card {
        margin: 10px;
        height: 200px;
        max-width: 100%;
        border-radius: 10px;
        background: #f6f6f7;
    }
    
    .block-opacity{
        opacity: @(IsMobile || Percent >= 70 ? 1 : (Percent - 30) / 30);
    }

    .first-button {
        width: 100%;
        border-radius: 10px;
        font-size: 22px;
        font-weight: 400;
        transition: .2s;
    }
    
    .home-title{
        color: #3c3c43;
    }
    
    @@media screen and (max-width: 1250px) {
        .block {
            padding: 40px;
            min-height: 0;
        }
        .home-title{
            font-size: 34px !important;
        }
    }
    
    @@media screen and (max-width: 992px) {
        .first-button{
            text-align: center;
        }
        
        .home-title{
            text-align: center;
        }
    }

    .first-button:hover {
        transform: scale(1.02);
        background: #f6f6f7;
        font-weight: bold;
        padding-left: 10px;
    }

    .Lyr-Display{
        transition: .2s;
        transform: scale(1.02);
        background: #f6f6f7;
        font-weight: bold;
        padding: 10px;
    }
    
    .card-d{
        font-size: 22px;
    }
</style>